import { PropsWithChildren } from "react";
import { View } from "@tarojs/components";
import { ModalTypes, useApplicationInfo } from "@/store/applicationDataContext";
import { Icon } from "@/components";
import style from "./index.module.scss";

interface ModalWrapperLightProps {
  type: "light";
  topBarText?: never;
  closeCb?: () => void;
}

interface ModalWrapperDarkProps {
  type: "dark";
  topBarText: string;
  closeCb?: () => void;
}

export const ModalWrapper = ({
  children,
  type,
  topBarText,
  closeCb,
}: PropsWithChildren<ModalWrapperLightProps | ModalWrapperDarkProps>) => {
  const { dispatch } = useApplicationInfo();

  const content =
    type === "light" ? (
      <View className={style.light} onClick={(e) => e.stopPropagation()}>
        <Icon
          type="CloseBlack"
          className={style.close}
          onClick={() => {
            closeCb && closeCb();
            dispatch({
              type: "SHOW_MODAL",
              data: ModalTypes.None,
            });
          }}
        />
        {children}
      </View>
    ) : (
      <View
        className={style.dark}
        onClick={(e) => {
          e.stopPropagation();
        }}
      >
        <View className={style["top-bar"]}>
          <View className={style["top-bar-text"]}>{topBarText}</View>
          <Icon
            className={style["top-bar-close-button"]}
            type="CloseWhite"
            onClick={() => {
              closeCb && closeCb();
              dispatch({ type: "SHOW_MODAL", data: ModalTypes.None });
            }}
          />
        </View>
        <View className={style.content}>{children}</View>
      </View>
    );

  return content;
};
